<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生js写React</title>
</head>

<body>
    <div id="test"></div>
</body>

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/javascript">
// <script type="text/babel">
    
    // 使用jsx时的语法，嵌套比较方便
    // const VDOM = (
    //     <>
    //         <h1>this is react JS page...</h1>
    //     </>
    // )
    

    // 没有jsx时候写虚拟DOM的语法
    const VDOM = React.createElement('h1', {id: 'wxy'}, 'hello', React.createElement('p', {}, 'my is p...',React.createElement('span',{}, 'span1')), React.createElement('span', {className: 'do'}, 'world!!!'))

    ReactDOM.createRoot(document.getElementById('test')).render(VDOM);

</script>
</html>